<template>
  <a-modal
    :open="open"
    width="840px"
    title="模板选择"
    :ok-button-props="{ disabled: !selectedRightItem?.inplsh }"
    ok-text="确定"
    centered
    @ok="onOk"
    @cancel="onCancel"
  >
    <div class="w-full flex">
      <BaseList :data-source="patientList" :loading="loading" class="px-3 w-1/5" @scroll="onScroll">
        <template #renderItem="{ item }">
          <div class="py-2 px-3" :class="{ 'select-active': selectedItem?.inplsh === item.inplsh }" @click="onClickLeft(item)">
            <div class="text-base truncate" :title="item.brName">{{ item.brName }}</div>
          </div>
        </template>
      </BaseList>
      <div class="w-4/5 px-2">
        <div class="w-full">
          <a-input-search v-model:value="formState.zjm" class="w-full" placeholder="模板名称/助记码" @search="getInpRecordList()" @change="onSearch()" />
        </div>
        <div class="w-full">
          <a-tabs v-model:active-key="formState.applyPath" @change="getData">
            <a-tab-pane :key="0" tab="全部" />
            <a-tab-pane :key="1" tab="个人" />
            <a-tab-pane :key="2" tab="科室" />
            <a-tab-pane :key="3" tab="全院" />
          </a-tabs>
        </div>
        <div class="w-full">
          <BaseList :data-source="patientList" :loading="loading" class="px-3 w-full" @scroll="onScroll">
            <template #renderItem="{ item }">
              <div class="py-2 px-3" :class="{ 'select-active': selectedRightItem?.inplsh === item.inplsh }" @click="onClickRight(item)">
                <div class="flex justify-between items-center w-full">
                  <div class="text-base font-bold text-primary truncate w-2/3" :title="item.brName">{{ item.brName || '姓名' }}</div>
                  <div class="flex justify-between w-1/3">
                    <div class="text-grey px-1 text-center w-1/3">{{ item.ksmc }}</div>
                    <div class="text-grey px-1 text-center w-1/3">{{ item.cfz }}</div>
                    <div class="text-grey px-1 text-center w-1/3">{{ item.xb }}</div>
                  </div>
                </div>
                <div class="flex justify-between items-center pt-2 w-full">
                  <div class="w-3/4 text-grey truncate">{{ item.sm }}</div>
                </div>
              </div>
            </template>
          </BaseList>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watchEffect } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import useUserStore from '@/store/user'
import { post } from '@/utils/request'

const router = useRouter()
const emit = defineEmits(['update:open', 'ok'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})
const patientList = ref([
  { brName: '张三', inplsh: '1', xb: '男', cfz: '初诊1', ksmc: '普外科1', sm: '说明1' },
  { brName: '李四', inplsh: '2', xb: '男', cfz: '初诊2', ksmc: '普外科2', sm: '说明2' },
  { brName: '王五', inplsh: '3', xb: '男', cfz: '初诊3', ksmc: '普外科3', sm: '说明3' },
  { brName: '赵六', inplsh: '4', xb: '男', cfz: '初诊4', ksmc: '普外科4', sm: '说明4' }
])
const formState = ref({
  zjm: '',
  applyPath: 0
})
const selectedItem = ref({})
const selectedRightItem = ref({})

const onClickLeft = (row) => {
  selectedItem.value = row
}
const onClickRight = (row) => {
  selectedRightItem.value = row
}

const { empName, empId } = useUserStore()
watchEffect(() => {
  if (props.open) {
    formState.value = { fpzt: 0, thr: empId, empName, thsj: dayjs().format('YYYY-MM-DD HH:mm:ss'), ...props.rowData }
  }
})

const onCancel = () => {
  selectedItem.value = {}
  selectedRightItem.value = {}
  emit('update:open', false)
}
const onOk = async () => {
  if (formState.value?.thsj && formState.value?.thckbh) {
    delete formState.value.createUser
    const { code, data } = await post('/drugStorage/psiform/doSaveReturnOrder', formState.value)
    if (code === 0) {
      if (!props.rowData?.thckbh) {
        router.push({
          path: '/drug/warehouse/return-detail',
          query: {
            thdh: data.thdh
          }
        })
      }
      message.success('保存成功')
      onCancel()
      emit('ok')
    }
  }
}
</script>
<style lang="less" scoped>
.select-active {
  color: var(--primary-color);
  background: var(--heavy-color) !important;
  border: 1px solid var(--primary-color) !important;
}
</style>
